<template>
  <div>
    <div>
      <!-- 页头 -->
      <div class="back">
        <i class="el-icon-back" @click="$router.go(-1)"></i>
        <span style="padding: 10px; color: rgba(0, 0, 0, 0.15)">|</span>
        <span style="font-size: 20px; font-weight: 500; color: #2f343e"
          >新增编辑模板</span
        >
      </div>
      <!-- 主题 -->
      <div class="content-box">
        <el-form
          ref="form"
          :model="formData"
          :rules="rules"
          label-width="120px"
          label-position="left"
        >
          <!-- 模版名称 -->
          <el-form-item label="模板名称:" prop="name">
            <el-input
              v-model="formData.name"
              placeholder="运行管理风险评估模板"
              style="width: 500px; margin-top: -10px"
            />
          </el-form-item>
          <!-- 模版类型 -->
          <el-form-item label="模板类型:" style="margin-left: 10px">
            <el-input
              v-model="formData.name"
              placeholder="运行管理风险评估"
              style="width: 500px; margin-left: -10px"
              :disabled="true"
            />
          </el-form-item>
        </el-form>
      </div>
      <div style="width:80%;margin-bottom:150px">
        <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :default-config="toolbarConfig"
        :mode="mode"
      />
      <Editor
        id="editor"
        v-model="content"
        style="height: 500px; overflow-y: hidden"
        :default-config="editorConfig"
        :mode="mode"
        @onCreated="onCreated"
      />
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$router.go(-1)">重 置</el-button>
      <el-button type="primary" @click="$router.go(-1)">保 存</el-button>
    </div>
  </div>
</template>
<script>
import HkTable from "@/components/HKTable";
// import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

export default {
  components: { HkTable, Editor, Toolbar },
  data() {
    return {
      editor: null,
      mode: "default", // or 'simple'
      content: "",
      toolbarConfig: {},
      editorConfig: { placeholder: "请输入内容..." },
      cycleNodeOption: [],
      formData: {
        cronType: "1",
        type: "",
        name: "",
        cycleTime: 0,
        timeNode: "",
        times: "",
        cycleNode: "",
      },
      // 表单参数
      rules: {
        name: [
          { required: true, message: "模版名称不能为空", trigger: "blur" },
        ],
        type: [{ required: true, message: "请选择作业类型", trigger: "blur" }],
        cycleTime: [{ required: true, message: "请选择", trigger: "blur" }],
        timeNode: [{ required: true, message: "请选择", trigger: "blur" }],
        day: [{ required: true, message: "请选择", trigger: "blur" }],
        times: [{ required: true, message: "请选择", trigger: "blur" }],
      },
      //   表头名称
      tableLabelList: [
        { label: "预警指标", param: "name", type: "slot", width: "240px" },
        {
          label: "判定条件",
          param: "datasourceName",
          type: "slot",
          width: "240px",
        },
        { label: "阈值", param: "outputDatasourceName", type: "slot" },
      ],
      arrList: [
        {
          name: "",
          datasourceName: "",
          outputDatasourceName: "",
        },
      ],
    };
  },
  methods: {
    //  富文本编辑器创建
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
      //  判断是否可编辑
      if (this.isPreset == "1") {
        this.editor.disable();
      }
    },
  },
};
</script>
<!-- <style src="@wangeditor/editor/dist/css/style.css"></style> -->

<style scoped lang="scss">
.back {
  margin-bottom: 20px;
}
.content-box {
  background-color: #ffffff;
  //   height: 1000px;
  padding-left: 30px;
  padding-top: 30px;
  padding-bottom: 10px;
}
.son-panel {
  display: flex !important;
}
.dialog-footer {
  margin-top: 20px;
  margin-bottom: 0px;
  display: flex;
  justify-content: flex-end;
  background-color: #ffffff;
  padding: 14px 20px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
::v-deep {
  .el-form-item--medium .el-form-item__content {
    // line-height: 32px;
    margin-bottom: 20px;
  }
  .el-input--medium .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
  .el-form-item__content {
    line-height: 0px;
  }
  .el-pagination {
    display: NONE;
  }
  .el-form-item--medium .el-form-item__label {
    margin-top: -9px;
  }
  .el-table th.el-table__cell > .cell {
    padding-left: 37px;
  }
  .el-textarea__inner {
    resize: none;
  }
}
</style>
